<template>
  <div class="chart-container">
    <div class="legend-container">
      <div class="legend-item">
        <span class="legend-icon" style="background-color: #00ffe6"></span>
        <p class="legend-label">
          累计收费（元）
          <span style="color: #00ffe6">{{ todayChargeData.ljsf_num }}</span>
        </p>
      </div>
      <div class="legend-item">
        <span class="legend-icon" style="background-color: #0092ff"></span>
        <p class="legend-label">
          今日收费（元）
          <span style="color: #0092ff">{{ todayChargeData.jrsf_num }}</span>
        </p>
      </div>
    </div>
    <div ref="charge_echart" class="charge_echart"></div>
  </div>
</template>
<script>
export default {
  //今日收费情况
  data() {
    return {
      todayChargeData: {},
    };
  },
  methods: {
    initChart() {
      fetch(`./testData/todayChargeData.json`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((data) => {
          let { xData, todayChargeData, todayData, totalData } = data;
          this.todayChargeData = todayChargeData;

          const option = {
            color: ["#00FFE6", "#0092FF", "#FFC200"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            legend: {
              top: 1,
              data: [
                {
                  name: "今日累计收费",
                  textStyle: {
                    color: "#fff",
                  },
                },
                {
                  name: "历史收费平均",
                  textStyle: {
                    color: "#fff",
                  },
                },
                {
                  name: "历史收费最高",
                  textStyle: {
                    color: "#fff",
                  },
                },
              ],
            },
            grid: {
              top: "20%",
              left: "3%",
              right: "4%",
              bottom: "2%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: xData,
              axisLabel: {
                color: "#fff",
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            yAxis: {
              type: "value",
              min: 0,
              max: 50000,
              interval: 10000,
              axisLabel: {
                formatter: "{value}%",
                color: "#fff",
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              splitLine:{
                show: false
              }
            },
            series: [
              {
                name: "今日累计收费",
                type: "line",
                lineStyle: {
                  color: "#00FFE6",
                },
                data: todayData,
                smooth: true,
              },
              {
                name: "历史收费平均",
                type: "line",
                lineStyle: {
                  color: "#0092FF",
                },
                data: [
                  0, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000,
                ],
                smooth: true,
                areaStyle: {
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0092FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(0, 0, 0, 0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                name: "历史收费最高",
                type: "line",
                lineStyle: {
                  color: "#FFC200",
                },
                data: totalData,
                smooth: true,
              },
            ],
          };

          let myChart = echarts.init(this.$refs.charge_echart);
          myChart.setOption(option, true);

          window.addEventListener("resize", () => {
            myChart.resize();
          });
        });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
.charge_echart {
  height: calc(100% - 25px);
}
.chart-container {
  height: calc(100% - 25px);
  position: relative;
}

.legend-container {
  padding-top: 3px;
  display: flex;
  justify-content: space-around;
  color: #fff;
  .legend-item {
    display: flex;
    align-items: center;
  }
  .legend-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
  }
  .legend-label {
    font-size: 16px;
  }
}

</style>
